<style>
    .tree {
        overflow: auto;
        min-height:20px;
        padding:19px;
        margin-bottom:20px;
        background-color:#fbfbfb;
        border:1px solid #999;
        -webkit-border-radius:4px;
        -moz-border-radius:4px;
        border-radius:4px;
        -webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
        -moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05);
        box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.05)
    }
    .tree li {
        list-style-type:none;
        margin:0;
        padding:10px 5px 0 5px;
        position:relative
    }
    .tree li::before, .tree li::after {
        content:'';
        left: -35px;
        position:absolute;
        right:auto
    }
    .tree li::before {
        border-left:3px solid #999;
        bottom:50px;
        height:100%;
        top: -7px;
        width:1px
    }
    .tree li::after {
        border-bottom:3px solid #999;
        height:20px;
        top:5px;
        width: 40px;
        border-bottom-left-radius: 5px;
    }
    .tree li span {
        display:inline-block;
        padding:3px 0;
        text-decoration:none;
    }
    .tree li.parent_li>span {
        cursor:pointer
    }
    .tree>ul>li::before, .tree>ul>li::after {
        border:0
    }
    .tree li:last-child::before {
        height: 30px;
    }
    .tree li.parent_li>span:hover, .tree li.parent_li>span:hover+ul li span {
        background:#eee;
        border:1px solid #94a0b4;
        color:#000
    }
</style>

<?php $lv = _get_level_info($member_data->level) ?>
<div class="col-lg-12">
    <div class="tree">
        <ul>
            <li id="node-<?= $member_data->alias_member ?>">
                <span><i class="fa fa-trophy"></i></span> 
                <img alt="<?= $lv ?>" title="<?= $lv ?>" class="status-icon" src="<?=base_url("assets/img/icon/$lv.png")?>" /> <?=$member_data->nickname . " (".$member_data->alias_member.")"?>
            </li>
            <br/>            
        </ul>
        <b><a href='<?=  base_url("index.php/member/data")?>'>KEMBALI KE DATA MEMBER</a></b>
    </div>
</div>

<script>
    $(function() {
        retrieve_downlines("#node-<?= $member_data->alias_member ?>", "<?= $member_data->alias_member ?>");
    });
    
    function refresh_bind(){
        $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch');
        $('.tree li.parent_li > span').unbind("click");
        $('.tree li.parent_li > span').on('click', function(e) {
            var children = $(this).parent('li.parent_li').find(' > ul > li');
            if (children.is(":visible")) {
                children.hide('fast');
                $(this).attr('title', 'Expand this branch').find(' > i').addClass('fa-plus-square').removeClass('fa-minus-square');
            } else {
                children.show('fast');
                $(this).attr('title', 'Collapse this branch').find(' > i').addClass('fa-minus-square').removeClass('fa-plus-square');
            }
            e.stopPropagation();
        });
        $('.tree .fa-search').unbind("click");
        $('.tree .fa-search').on('click', function(e) {
            var id = $(this).attr("data-id");
            
            retrieve_downlines("#node-" + id, id);
        });
    }
    
    function retrieve_downlines(elm, alias){
        $.get("<?=base_url()?>index.php/network/geneology_data/" + alias, function(data) {
            var $i = $(elm).find(".fa-search");
            $i.unbind("click").removeClass("fa-search");
            
            if(data != ""){
                $i.addClass('fa-minus-square');
                $(elm).append(data);
                
                refresh_bind();
            } else {
                $i.addClass('fa-leaf');
            }
        });
    }
</script>